﻿<!DOCTYPE>
<html lang="en-us">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no" />
    <title>Monster Warriors</title>
    <link rel="stylesheet" href="styles/main.css" />
    <link rel="stylesheet" href="styles/fontfaces.css" />
    <link rel="stylesheet" href="styles/mobile.css" media="screen and (max-device-width: 768px) and (orientation: portrait),
        screen and (max-device-width: 1024px) and (orientation: landscape)" />
    <script src="scripts/modernizr.custom.js"></script>
    <script src="scripts/loader.js"></script>
</head>
<body>
    <div id="game">
        <div class="screen" id="splash-screen">
            <h1 class="logo">
                Monster
                <br />
                Warriors</h1>
            <span>Click to continue</span>
        </div>
        <div class="screen" id="main-menu">
            <h2 class="logo">
                Monster
                <br />
                Warriors</h2>
            <ul class="menu">
                <li>
                    <button name="game-screen">
                        Play</button></li>
                <li>
                    <button name="hiscore">
                        Highscore</button></li>
                <li>
                    <button name="about">
                        About</button></li>
                <li>
                    <button name="exit-screen">
                        Exit</button></li>
            </ul>
        </div>
        <div class="screen" id="game-screen">
        </div>
        <div class="screen" id="high-scores">
        </div>
    </div>
</body>
</html>